Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@ant-design/cssinjs

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ant-design/cssinjs

Component level cssinjs resolution for antd

0.0.0-alpha.60
Source
npm

Version published: 2 years ago

Weekly downloads: 953K; increased by8.58%

Maintainers: 10

Weekly downloads

Created: 3 years ago

What is @ant-design/cssinjs?

@ant-design/cssinjs is a library that allows you to write CSS-in-JS for Ant Design components. It provides a way to style your components using JavaScript, which can help in maintaining styles in a modular and reusable manner.

What are @ant-design/cssinjs's main functionalities?

Define Styles

This feature allows you to define styles using JavaScript objects. The `createUseStyle` function takes a callback that returns an object with your styles. The `token` parameter can be used to access theme variables.

const useStyle = createUseStyle(({ token }) => ({
  button: {
    backgroundColor: token.colorPrimary,
    color: token.colorText,
    padding: '10px 20px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  }
}));

Apply Styles

This feature allows you to apply the defined styles to your components. The `useStyle` hook returns an object with the generated class names, which you can then apply to your JSX elements.

const MyButton = () => {
  const { styles } = useStyle();
  return <button className={styles.button}>Click Me</button>;
};

Theming

This feature allows you to use theming in your application. You can define a theme object and use the `ThemeProvider` component to pass the theme to your styled components.

const theme = {
  colorPrimary: '#1890ff',
  colorText: '#ffffff'
};

const App = () => (
  <ThemeProvider theme={theme}>
    <MyButton />
  </ThemeProvider>
);

Other packages similar to @ant-design/cssinjs